<template>
  <div class="ccc" v-show="value">
    <slot name="pname" />
    <h1>插槽使用演示</h1>
    <!-- 显示默认插槽内容 -->
    <slot />
    <slot name="divname" />
    <div>
      <slot name="divna" />
    </div>
    <!-- 控制显示 -->
    <button @click="close">close</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorldSlot',
  props: {
    msg: String,
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close () {
      // 不能这么玩
      // this.value = false
      this.$emit('input', false)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
